<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <!--Cesium js文件引入 -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000000;
        }

        #trailer {
            position: absolute;
            bottom: 75px;
            right: 0;
            width: 320px;
            height: 180px;
        }
    </style>
</head>
<body>
<template>
    <div>
        <div id="cesiumContainer"></div>
    </div>
</template>
 <!-- 视图显示容器 -->
  <div id="cesiumContainer"></div>
  <div id="latlng_show" style="width:420px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;">
        <div style="width:140px;height:30px;float:left;">
            <font size="3" color="white">经度：<span id="longitude_show"></span></font>
        </div>
        <div style="width:140px;height:30px;float:left;">
            <font size="3" color="white">纬度：<span id="latitude_show"></span></font>
        </div>
        <div style="width:140px;height:30px;float:left;">
            <font size="3" color="white">高程：<span id="altitude_show"></span>m</font>
        </div>
    </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    // 注册密钥: https://cesium.com/ion/tokens.
    // 账号密钥
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjOGFhZjViMy0xYTZiLTRlZjEtOGQ5Mi0xMDM1MDU2ZjgyMGIiLCJpZCI6MjYzMzYzLCJpYXQiOjE3MzQ1MjQ3OTd9.6DG2rwJAc4eK7EVo2GDamfsnHh2yPstCUh0ioaeH99w';
	 //viewer.imageryLayers.get(0).show = false;
	 //viewer.scene.globe.baseColor = Cesium.Color.BLACK;
	Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 55)  //默认视角定位中国上空
	var viewer = new Cesium.Viewer('cesiumContainer',{
			animation: false, //是否显示动画控件
			shouldAnimate: false,
			homeButton: false, //是否显示Home按钮
			fullscreenButton: false, //是否显示全屏按钮
			baseLayerPicker: false, //是否显示图层选择控件
			geocoder: false, //是否显示地名查找控件
			timeline: false, //是否显示时间线控件
			sceneModePicker: false, //是否显示投影方式控件
			navigationHelpButton: false, //是否显示帮助信息控件
			infoBox: false, //是否显示点击要素之后显示的信息
			requestRenderMode: true, //启用请求渲染模式
			scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
			sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
			skyAtmosphere:false,
			fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处	
			 // 地形 
			terrainProvider:new Cesium.createWorldTerrain({
				requestVertexNormals:false,
				requestWaterMask:false
			}) 
	});
	viewer.scene.globe.depthTestAgainstTerrain = true;
	viewer.scene.sun.show = false;
	viewer.scene.moon.show = false;
	viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
	viewer.scene.undergroundMode = false;
	viewer.scene.globe.show = false; //关闭地球

	var longitude_show = document.getElementById('longitude_show');
	var latitude_show = document.getElementById('latitude_show');
	var altitude_show = document.getElementById('altitude_show');
	 
	 
	//获取坐标转经纬度
	let handler = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas);
	handler.setInputAction(function (event) {
	    console.log(event.position);
		let earthPosition = window.viewer.scene.pickPosition(event.position);
		if (Cesium.defined(earthPosition)) {
			let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
			console.log(cartographic);
			let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
			let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
			let height = cartographic.height.toFixed(2);
			console.log(earthPosition, {
				lon: lon,
				lat: lat,
				height: height,
			});
			longitude_show.innerHTML = lon;
			latitude_show.innerHTML = lat;
			altitude_show.innerHTML = height;
		}
	}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
	
	
	//加载3DTiles 
	function tilesetload(){
	var uri = 'http://127.0.0.1/TilesetWithDiscreteLOD/tileset.json';
		var tileset =  new Cesium.Cesium3DTileset({       
			url: uri,
			//我这里使用的本地iis代理的数据  后期会出iis如何代理瓦片数据的
			// url: 'http://localhost:8086/tileset.json',
          //控制切片视角显示的数量，可调整性能
            // maximumScreenSpaceError: 2,
            //     maximumNumberOfLoadedTiles: 100000,
			show:true,
			skipLevelOfDetail : true,
	     	baseScreenSpaceError : 1024,
      		skipScreenSpaceErrorFactor : 16,
	      	skipLevels : 1,
	     	immediatelyLoadDesiredLevelOfDetail : false,
	     	loadSiblings : false,
      		cullWithChildrenBounds : true
      })
	viewer.scene.primitives.add(tileset);
	
	//定位到模型的位置
	    (async () => {
            try {
              await tileset.readyPromise;
              await viewer.zoomTo(tileset);
		    // Apply the default style if it exists
		    var extras = tileset.asset.extras;
			    if (
			    Cesium.defined(extras) &&
			    Cesium.defined(extras.ion) &&
			    Cesium.defined(extras.ion.defaultStyle)
			    ) {
			    tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
			    }
		    } catch (error) {
			    console.log(error);
		    }
	    })(); 
		calc3DTileCenter(uri);
	}
 	tilesetload();
	
  </script>
 </div>
</body>
</html>
